import React from 'react';
import {
    SafeAreaView,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    useColorScheme,
    View,
    TouchableOpacity,
    Image,
    Alert
} from 'react-native';

const Tab = (props) => {
    const { onActive, active = 0 } = props;
    const data = [
        {
            icon: <Image source={require('../image/home.png')} style={styles.img} />,
            iconed: <Image source={require('../image/homeed.png')} style={styles.img} />,
            text: '首页'
        },
        {
            icon: <Image source={require('../image/shop.png')} style={styles.img} />,
            iconed: <Image source={require('../image/shoped.png')} style={styles.img} />,
            text: '商城'
        },
        {
            icon: <Image source={require('../image/xinged.png')} style={styles.img} />,
            iconed: <Image source={require('../image/xing.png')} style={styles.img} />,
            text: '灵感'
        },
        {
            icon: <Image source={require('../image/my.png')} style={styles.img} />,
            iconed: <Image source={require('../image/myed.png')} style={styles.img} />,
            text: '我的'
        }
    ]

    return (
        <View style={styles.tabContainer}>
            {
                data.map((item, index) => {
                    const myStyle = index == active ? styles.itemActive : styles.item
                    const textStyle = index == active ? styles.textActive : styles.text
                    const icon = index == active ? item.iconed : item.icon
                    return (
                        <View key={index} style={myStyle}>
                            <TouchableOpacity style={styles.itemWrap}  onPress={() => onActive(index)}>
                                {icon}
                                <Text style={textStyle}>{item.text}</Text>
                            </TouchableOpacity>
                        </View>
                    )
                })
            }
        </View>
    )
}

const styles = StyleSheet.create({
    text: {

    },
    textActive: {
        color: '#f4ea2a'
    },
    img: {
        width: 30,
        height: 30
    },
    itemWrap: {
        display: 'flex',
        flexDirection: 'column',
        height: 42,
    },
    tabContainer: {
        width: '100%',
        display: 'flex',
        flexDirection: 'row',
        borderTopWidth: 1,
        borderTopColor: '#d8d8d8',
        paddingTop: 8
    },
    item: {
        flex: 1,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: 42,
        width: '100%'
    },
    itemActive: {
        flex: 1,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: 42,
        width: '100%'
    }
});

export default Tab